<template>
  <el-row :gutter="20" class="panel-group">
    <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
      <div class="panelBox">
        <div class="icon-box icon1">
          <SvgIcon icon-class="order_money" class="panel-icon"/>
        </div>
        <div class="card-panel-icon-wrapper">
          <p>{{ totalInfo.sale_amount }}</p>
          <span>订单金额</span>
        </div>
      </div>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
      <div class="panelBox">
        <div class="icon-box icon2">
          <SvgIcon icon-class="order_qty" class="panel-icon"/>
        </div>
        <div class="card-panel-icon-wrapper">
          <p>{{totalInfo.sale_cnt}}</p>
          <span>订单量</span>
        </div>
      </div>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
      <div class="panelBox">
        <div class="icon-box icon3">
          <SvgIcon icon-class="return_money" class="panel-icon"/>
        </div>
        <div class="card-panel-icon-wrapper">
          <p>{{totalInfo.sale_service_amount}}</p>
          <span>退款金额</span>
        </div>
      </div>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
      <div class="panelBox">
        <div class="icon-box icon4">
          <SvgIcon icon-class="return_qty" class="panel-icon"/>
        </div>
        <div class="card-panel-icon-wrapper">
          <p>{{totalInfo.sale_service_ant}}</p>
          <span>退款订单量</span>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
const props = defineProps({
  totalInfo: {
    type: Object,
    default: () => {}
  }
})
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.card-panel-col {
  margin-bottom: 20px;
}

.panelBox {
  height: 100px;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 20px;
  background-color: #ffffff;
  display: flex;
  align-items: center;

  .icon-box{
    border-radius: 50%;
    border: 6px solid #ffffff;

    &.icon1{
      border-color:rgba(20, 197, 91, 0.2);
    }
    &.icon2{
      border-color:rgba(84, 112, 222, 0.2);
    }
    &.icon3{
      border-color:rgba(255, 86, 98, 0.2);
    }
    &.icon4{
      border-color:rgba(255, 125, 20, 0.2);
    }

    .panel-icon {
      font-size: 50px;
    }
  }


  .card-panel-icon-wrapper {
    margin-left: 20px;

    & > p {
      margin: 0;
      font-size: 28px;
    }

    & > span {
      color: #999999;
    }
  }

}
</style>
